<template>
	<view class="u-p-20">
		<!-- 分组 -->
		<view class="cart-group" v-for="(item,index) in cartList" :key="index">
			<view class="u-p-20 cart-group-top u-border-bottom item-w">
				<u-checkbox-group>
					<u-checkbox v-model="item.selectAll" :name='item.id' shape="circle" active-color="#0eb6ff"
						@change="changeGroup">
						{{item.name}}
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 单体 -->
			<view class="u-p-20 item-w u-flex " v-for="(val,idx) in item.list" :key='idx'>
				<u-checkbox-group>
					<u-checkbox @change="changeChildren" :name='val.itemCode' v-model="val.select" shape="circle"
						active-color="#0eb6ff"></u-checkbox>
				</u-checkbox-group>
				<view class="u-flex cart-item" :class="vertical?'u-flex-col':''">
					<u-image v-show="val.url" width="160rpx" height="160rpx" :src="val.url"></u-image>
					<view class="u-flex-1 u-p-l-20">
						<view class="name u-line-1">
							{{val.itemName}}
						</view>
						<view class="u-flex u-row-between">
							<view class="u-flex">
								单位：KG
							</view>
							<!-- <u-number-box v-model="val.quantity" :step="0.01"
								@change="valChange(val.quantity,index,idx)">
							</u-number-box> -->
							<!-- 	<uni-number-box v-model="val.quantity" :max="9999" :step="0.01"
								@change="valChange(val.quantity,index,idx)">
							</uni-number-box> -->
							<view style="width: 200rpx;">
								<u-input v-model="val.quantity" :border="true" type="number" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10" bg-color="#f5f5f5"></u-gap>
		</view>
		<!-- <view class="settlement-style u-flex u-row-right u-border-top" :animation="animationData">
			<view>合计：</view>
			<prices-style :prices="999.9"></prices-style>
			<view class="settlement-btn u-text-center" @click="goPage">结算</view>
		</view> -->
	</view>
</template>

<script>
	// const animation = uni.requireNativePlugin('animation')
	export default {
		computed: {
			// priceStyle() {
			// 	let style = {
			// 		color: this.textColor,
			// 		'text-decoration': this.through ? 'line-through' : ''
			// 	}
			// 	return style
			// }
		},
		props: {
			cartList: {
				type: Array,
				default: () => {
					return [] 
				}
			}
		},
		data() {
			return {
				cartGroupList: this.cartList,
				item: {},
				vertical: false,
				show: false,
				animationData: {}
			};
		},
		// onNavigationBarButtonTap() {
		// 	this.$toast('点击了删除')
		// },
		onLoad() {},
		methods: {
			// settlement() {
			// 	let arr = []
			// 	this.cartList.map(item => {
			// 		arr.push(...item.list.filter(val => val.select))
			// 	})
			// 	var animation = uni.createAnimation({
			// 		duration: 500,
			// 		timingFunction: 'ease',
			// 	})
			// 	if (arr.length) {
			// 		this.show = true
			// 		animation.translateY(-50).opacity(1).step()
			// 		this.animationData = animation.export()
			// 	} else {
			// 		this.show = false
			// 		animation.translateY(50).opacity(0).step()
			// 		this.animationData = animation.export()
			// 	}
			// },
			//已选
			selected() {
				let arr = []
				this.cartList.map(item => {
					arr.push(...item.list.filter(val => val.select))
				})
				this.$emit('selectChange', arr)
			},
			// 单体复选框
			changeChildren(e) {
				this.$nextTick(function() {
					this.cartGroupList = this.cartList.map(item => {
						if (item.id == e.name) {
							let arr = item.list.filter(val => {
								return !val.select
							})
							item.selectAll = true
							if (arr.length) {
								item.selectAll = false
							}
						}
						return item
					})
					this.selected()
				})
			},
			// 选中组复选框
			changeGroup(e) {
				this.cartGroupList = this.cartList.map(item => {
					if (item.id == e.name) {
						item.list = item.list.map(val => {
							val.select = e.value
							return val
						})
					}
					return item
				})
				this.selected()
			},
			valChange(value, index, idx) {
				this.$emit('changeNum', value, index, idx)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.settlement-btn {
		width: 150rpx;
		padding: 20rpx;
		border-radius: 50rpx;
		background-color: #0eb6ff;
		margin: 0 20rpx;
		color: #FFFFFF;
	}

	.settlement-style {
		position: fixed;
		/* #ifdef H5 */
		bottom: 0px;
		/* #endif */
		/* #ifndef H5 */
		bottom: -50px;
		/* #endif */
		width: 100%;
		height: 100rpx;
		left: 0;
		opacity: 0;
		background-color: #FFFFFF;
	}

	.cart-group {
		background-color: #FFFFFF;
		border-radius: 8rpx;

		.cart-group-top {
			font-weight: 600;
		}

		.item-w {
			width: 100%;
		}

		.cart-item {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			width: 100%;

			.u-flex-1 {
				width: 100%;
			}

			.name {
				font-weight: 600;
				width: 100%;
			}

			.label,
			.delivery {
				color: #ce5f4d;
				font-size: 24rpx;
				border: 1rpx solid #ce5f4d;
				padding: 0 5rpx;
				border-radius: 4rpx;
				transform: scale(0.8);
			}

			.delivery {
				color: #d9b89d;
				border: 1rpx solid #d9b89d;
			}

			.sold {
				color: #a3a6a3;
				font-size: 24rpx;
			}

			.uni-numbox .uni-numbox__value {
				width: 60px !important;
			}
		}

	}
</style>
